forum

Home / DeveloperSection / Forums / How to bind products list in knockoutjs with Mvc

Ask Question
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

15-Oct-2015 
answer 415871510032251
<!DOCTYPEhtml>
<html>
<head>
    <metaname="viewport"content="width=device-width, initial-scale=1">
    <scriptsrc="/Scripts/jquery-2.1.4.min.js"></script>
  <scriptsrc="/Scripts/knockout-3.3.0.js"></script>
</head>
<body>
<div id="demo">
<table>
    <thead>
        <tr>
            <th>Product Id</th>
            <th>Product Name</th>
            <th>Price</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody databind="foreach:Products">
        <tr>
 <td><labeldata-bind="text:ProductId"></label></td>
      <td><labeldata-bind="text:ProductName"></label></td>
      <td><labeldata-bind="text:Price"></label></td>
      <td><pdata-bind="text:Description"></p></td>
        </tr>
    </tbody>
</table>
</div>
<script>
function viewModel() {
    var self = this;
self.Products = ko.observableArray(); 
    $.getJSON("/Home/Products", function (data) {
        self.Products (data);
    });
 }
$(function () {
    var NewViewModel = new viewModel ();
    ko.applyBindings(NewViewModel, document.getElementById("demo")); 
});
</script>
</body>
</html>
publicclassHomeController : Controller
{
 publicJsonResult Products ()
 {
 var data = db.Database.SqlQuery<Manufacturers>(@"SELECT DISTINCT ProductId ,
 ProductName,Price,Description FROM products_table").ToList();
 return Json(data, JsonRequestBehavior.AllowGet);
 }
}

Liked By